title: 犀利开发—jQuery内核详解与实践-3_高效选择的技巧与原理

date: 2018.1.8

第 1 章 jQ起步

1.1 认识jQuery
1.2 jQuery初步体验
1.3 jQuery核心特性

第 2 章 jQ解密技术

2.1 jQuery框架设计概述

1 设计目标　
2 目标实现

2.2 jQuery原型技术分解

1 起源——原型继承
2 生命——返回实例
3 学步——分隔作用域
4 生长——跨域访问
5 成熟——选择器
6 延续——迭代器
7 延续——功能扩展
8 延续——参数处理
9 涅槃——名字空间

2.3 破解jQuery选折起接口

1 简单但很复杂的黑洞
2 盘根错节的逻辑关系
3 jquery构造器
4 生成DOM元素
5 引用DOM元素

2.4 解析jQuery选择器引擎Sizzle

2.5 类数组

第 3 章高效选择的技巧与原理

3.1 选择器是什么

1 从css选择器说起

4伪类 5伪对象 6用户界面-4 7结构性-4 8其他（:not(s),:target-4

2 jQuery盗了谁的版

cssQuery

3 认识cssQuery选择器

4 使用cssQuery选择器

5 初步接触jQuery选择器

解决两大难题：支持css1，css2，css3；支持不同类型的主流浏览器
永远返回一个数组对象，所以 if($(‘tr’).length>0)

简单、包含、筛选、内容、属性、表单

3.2 简单选择器

#id element .class * selector1,selector2,selector3

1 选择指定ID元素

执行效率比较分析
jquery用时长
jQuery方法应用解析
div1

div1

div1

$(“#a\.b”) $(“#a\:b”) $(“#\{div\}”)
document.getElementById(“a.b”) a:b [div]

2 选择指定类型

—— jQuery用时多，而且更严重
3 选择指定类
—— 自定义的不如jQuery
2018.1.10 00:26 P113</>
2018.1.10 21:36</>

4 选择所有元素及其优化

更高效的方法：结合两者
var all=document.getElementByTagName(“*”)
$(all).css(“color”,”red”)

5 选择多组元素及其实现

3.3 关系选择器

1 层级选择器

选择器、子选择器>、相邻选择器+、兄弟选择器~

2 层级选择器的实现方法

var Expr=Sizzle.selectors={
    relative:{
        "+":function(){},
        ">":funciton(){},

    }
}
function dirNodeCheck(dir,cur,doneName,checkSet,nodeCheck,isXML){}
function dirCheck(dir,cur,doneName,checkSet,nodeCheck,isXML){}

3 子元素选择器

:nth-child :first-child :last-child :only-child

4 子元素选择器的实现方法

var Expr=Sizzle.selectors={
    order:["ID","NAME","TAG"],
    match:{
        ID:/  /,CLASS://,NAME://,

    }
}

3.4 过滤选择器

1 定位过滤器

:first,:last,:not,:even,:odd,:eq,:gt,:lt,:header,:animated

2 定位过滤器的实现方法

var Expr=Sizzle.selectors={
    setFilters:{
        first:function(elem,i){return i===0},

    },
    filter:{
        POS:function(elem,match,i,array){
            var name=match[2],filter=Expr.setFilters[name]
            if(filter){
                return filter(elem,i,match,array)
            }
        }
    }
}

3 内容过滤器

:contains,:empty,:has,:parent

4 内容过滤器的实现方法

var Expr=Sizzle.selectors={
    filters:{
        parent:function(elem){return !!elem.firstChild},
        empty:function(elem){return !elem.firstChild},
        has:function(elem,i,match){},


        PSEUDO:function(elem,match,i,array){
            var name=match[1],filter=Expr.filters[name]
            if(filter){}
            else if(name==="contains"){}
            else if(name==="not"){return true}
        }
    }
}

5 可见过滤器

:hidden,:visible

6 可见过滤器的实现方法

Sizzle.selectors.filters.hidden=function(elem){return elem.offsetWidth===0||elem.offsetHeight===0}
Sizzle.selectors.filters.visible=function(elem){return }
Sizzle.selectors.filters.animated=function(elem){return jQuery.grep(…)}

3.5 属性选择器

1 使用属性选择器

[a],[a=v],!=,^=,$=,*=,[a1][a2][aN]

2 使用属性选择器的实现方法

3.6 表单选择器

1 基本表单选择器

:input,:text,:password,:radio,:checkbox,:submit,:image,:reset,:button,:file,:hidden

date: 2018.1.8

第 1 章 jQ起步

第 2 章 jQ解密技术

2.1 jQuery框架设计概述

2.2 jQuery原型技术分解

2.3 破解jQuery选折起接口

2.4 解析jQuery选择器引擎Sizzle

2.5 类数组

第 3 章 高效选择的技巧与原理

3.1 选择器是什么

1 从css选择器说起

2 jQuery盗了谁的版

3 认识cssQuery选择器

4 使用cssQuery选择器

5 初步接触jQuery选择器

3.2 简单选择器

1 选择指定ID元素

2 选择指定类型

3 选择指定类

4 选择所有元素及其优化

5 选择多组元素及其实现

3.3 关系选择器

1 层级选择器

2 层级选择器的实现方法

3 子元素选择器

4 子元素选择器的实现方法

3.4 过滤选择器

1 定位过滤器

2 定位过滤器的实现方法

3 内容过滤器

4 内容过滤器的实现方法

5 可见过滤器

6 可见过滤器的实现方法

3.5 属性选择器

1 使用属性选择器

2 使用属性选择器的实现方法

3.6 表单选择器

1 基本表单选择器

2 高级表单选择器

3 表单选择器的实现方法

第 4 章 文档对象的操作及高效实践

第 5 章 事件封装机制与解析

第 6 章 动画效果设计及其高效实践

第 7 章 Ajax异步通信高效实践

第 8 章 高效开发和使用插件

第 9 章 jQ辅助工具

第 10 章 使用jQ打造Ajax异步交互式动态网站

第 3 章高效选择的技巧与原理

第 4 章文档对象的操作及高效实践

第 5 章事件封装机制与解析

第 6 章动画效果设计及其高效实践

第 8 章高效开发和使用插件

第 10 章使用jQ打造Ajax异步交互式动态网站